<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>

        .homeBox {
            display: flex;
            justify-content: space-around;

        }

    </style>
</head>

<body>
    <div id="app">
        <h1>{{msg}}</h1>


      




         <hr>
         <!-- <home >
            
            myList 随便取  如果不想随便 默认 slotProps
            <template  v-slot:mydata='myList'>
                <ul>
                    <li v-for="(item,key,index) in  myList"> 
                        {{item}}----{{key}}
                    </li>
                </ul>
                  <h2 style="color:'red'"> {{myList.data}}</h2>
            </template>
         
         </home> -->


         <hr>
         <hr>
         <hr>
         <h2>新组件</h2>

         <home>

          
            
        
            <template v-slot:my-user-tmp="mydata">
                
                <div>

                    <div>  {{mydata.aaa}}</div>
                
                  <h2 style="color:'red'"> {{mydata.myuser.lastName}}</h2>
                </div>
            </template>
         
         </home>

    </div>



    <!-- 模板  -->


    <!-- <template id='home'>
        <div class="homeBox">
          
          <ul>
              <li v-for="(item,index) in  homeList">
                  {{item}}
              </li>
          </ul>
           <div>

             <!-- <slot    data='hello ktv'   aaa='我又从内部传递过来一个值'  name='mydata'> {{msg}}</slot> -->

              <!-- 默认的就叫default -->
              <!-- <slot    data='hello ktv'   name='default'> {{msg}}</slot> -->
             
              <!-- <slot   v-bind:myuser='user'  aaa='nihao '  name='myuserTmp'> {{user.firstName}}</slot> -->



           <!-- </div>
         
         
        </div> -->
    <!-- </template>  -->



    <template id='home'>
        <div class="homeBox">
          
        
           <div>
             
              <slot   v-bind:myuser='user'  aaa='nihao'  name='my-user-tmp'> {{user.firstName}}</slot>
           </div>
         
         
        </div>
    </template>


    <script src="./vue.js"></script>
    <script>


Vue.component("home",{
       template:'#home',
       data(){
           return{
               homeList:['洗脚','按摩','ktv'],
               msg:'我是home组件自己的数据',
               user:{
                   firstName:'张胜男',
                   lastName:'男胜张'
               }

           }
       }
       
       
   })

        var vm = new Vue({
            el: '#app',
            data: {
                msg: 'vue'
            },
            methods: {
            }
        });
    </script>
</body>

</html>
<!--  -->